<template>
  <div class="login_box">
    <div class="logo">
      <img :src="require('../../image/defaultHeadImg.jpeg')" alt />
    </div>
    <h1 style="padding:0.2rem 0 .5rem;font-size:.5rem">梦莱德 - App</h1>
    <yd-cell-group>
      <yd-cell-item>
        <yd-input
          slot="right"
          v-model="loginForm.username"
          required
          placeholder="账号"
          :show-success-icon="false"
          :show-error-icon="false"
          class="input-style"
        ></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <yd-input
          slot="right"
          type="password"
          v-model="loginForm.pwd"
          required
          :show-clear-icon="show_clear"
          :show-success-icon="false"
          :show-error-icon="false"
          placeholder="密码"
          class="input-style"
        ></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <!--        图片验证码-->
    <yd-cell-group>
      <yd-cell-item :style="{ display: 'flex' }">
        <yd-input
          slot="left"
          v-model="loginForm.code"
          placeholder="验证码"
          class="input-style"
        ></yd-input>
        <img
          slot="right"
          :src="require('../../image/验证码.png')"
          style="width: 1.5rem;max-height:.8rem;margin-right:0"
        />
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" @click.native="submituUserInfo" class="login-btn"
      >登&nbsp;&nbsp;&nbsp;&nbsp;录</yd-button
    >
    <div
      style="display:flex;justify-content:space-between;align-items:center;margin-top:.15rem"
    >
      <div style="display:flex;align-items:center;">
        <yd-icon name="weixin" style="margin-right:.1rem"></yd-icon>
        <span style="font-size:.28rem">微信登录</span>
      </div>
      <div @click="toRegister" style="font-size:.28rem">
        注册
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        pwd: '',
        code: ''
      },
      show_clear: false,
      isshow: true
    };
  },
  created() {},
  methods: {
    submituUserInfo() {
      this.$store
        .dispatch('Logins', this.loginForm)
        .then(res => {
          this.$router.push({ path: '/' });
        })
        .catch(error => {
          this.$dialog.toast({
            mes: error,
            timeout: 1500,
            icon: 'error'
          });
        });
    },
    toRegister() {
      this.$router.push('/register');
    }
  }
};
</script>
<style lang="less" scoped>
.login_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.3125rem 0.3125rem;
  text-align: center;
}

.logo {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 0;

  img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }
}

/deep/ .input-style input {
  font-size: 0.32rem !important;
  letter-spacing: 1px;
  font-weight: 500;
}

.login-btn {
  border-radius: 0.25rem;
  font-size: 0.36rem;
  margin-top: 0.1rem;
  height: 0.8rem;
  font-weight: 500;
}
</style>

<style lang="less" scoped>
@import '../../static/css/common.css';
</style>
